<template>
	<view>
		<u-popup :show="show" round position="bottom" root-porta z-index="99999" @close="cancel">
			<view class="popup-container">
				<view class="title">组织机构选择</view>
				<view class="previous-container" v-if="level" @tap="lastOrg" hover-class="common-btn">
					<view class="left-arrow"></view>
					<view class="previous-title">返回上一级</view>
				</view>
				<scroll-view class="popup-scroll-view" scroll-y>
					<view class="org-list">
						<u-radio-group v-model="chooseOrg.orgId" @change="changeRadio">
							<view v-for="(item, index) in currentOrgList" :key="item.orgId" class="org-item-container">
								<view class="org-item" v-if="item.children && item.children.length != 0">
									<u-radio :name="item.orgId" class="org-item-radio"></u-radio>
									<view class="org-item-content" hover-class="common-btn" @tap..stop="nextOrg" :data-item="item">
										<view class="org-name">{{ item.orgName }}</view>
										<view class="right-arrow"></view>
									</view>
								</view>

								<view class="org-item" v-else @tap="chooseOrgFun" :data-item="item" hover-class="common-btn">
									<u-radio :name="item.orgId" class="org-item-radio"></u-radio>
									<view class="org-item-content">
										<view class="org-name">{{ item.orgName }}</view>
									</view>
								</view>
							</view>
						</u-radio-group>
					</view>
				</scroll-view>
				<view class="choose-org-btns">
					<view class="choose-org-btn" hover-class="common-btn" @tap="cancel">取消</view>
					<view class="choose-org-btn" hover-class="common-btn" @tap="submit">确认选择</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
import { common } from '@/pagesA/utils/common.js';
const app = getApp();
export default {
	data() {
		return {
			chooseOrg: {
				orgId: ''
			},
			showPopup: false,
			historyOrgList: [],
			currentOrgList: [],
			level: 0,
			orgList: []
		};
	},
	props: {
		show: {
			type: Boolean,
			default: false
		},
		initOrg: {
			type: Object
		},
		projectUuid: {
			type: String
		},
		personType: {
			type: String
		}
	},
	watch: {
		show: {
			handler: function (value) {
				if (value) {
					this.init();
				}
			},
			immediate: true
		}
	},
	methods: {
		init() {
			this.chooseOrg = this.initOrg;
			if (this.projectUuid) {
				//扫项目码进来
				this.getOrganizationTree();
			} else {
				this.getRosterOrganizationTree();
			}
			this.showPopup = false;
			this.historyOrgList = [];
			this.currentOrgList = [];
			this.level = 0;
		},
		orgFindPath(tree, fn, pathData = []) {
			if (!tree) {
				return [];
			}
			for (const data of tree) {
				pathData.push(data.orgName);
				if (fn(data)) {
					return pathData;
				}
				if (data.children) {
					const findChildren = this.orgFindPath(data.children, fn, pathData);
					if (findChildren.length) {
						return findChildren;
					}
				}
				pathData.pop();
			}
			return [];
		},
		getOrganizationTree() {
			common.apis.project
				.getOrganizationTree({
					projectUuid: this.projectUuid
				})
				.then((res) => {
					if (!res.data) {
						return;
					}
					this.orgList = res.data;
					this.currentOrgList = res.data;
				});
		},
		getRosterOrganizationTree() {
			common.apis.roster.getOrgnationTree().then((res) => {
				if (!res.data) {
					return;
				}
				this.orgList = res.data;
				this.currentOrgList = res.data;
			});
		},
		lastOrg() {
			this.currentTarget = this.historyOrgList[this.historyOrgList.length - 1];
			this.historyOrgList.pop();
			this.currentOrgList = this.currentTarget;
			this.level = this.level -= 1;
		},
		nextOrg(e) {
			const item = e.currentTarget.dataset.item;
			if (!item.children || item.children.length == 0) {
				return;
			}
			this.historyOrgList.push(this.currentOrgList);
			this.currentOrgList = item.children;
			this.level = this.level += 1;
		},
		checkChooseOrg(chooseOrg) {
			if (chooseOrg && chooseOrg.orgType && this.personType) {
				if (this.personType == '10' && chooseOrg.orgType == 3) {
					common.message.toast('管理人员只能选择非班组（公司、部门、项管部）');
					return;
				}
				if (this.personType != '10' && chooseOrg.orgType == 1) {
					common.message.toast('建筑工人或班组长只能挂到班组下');
					return;
				}
				if (this.personType != '10' && chooseOrg.orgType == 2) {
					common.message.toast('建筑工人或班组长不能挂到部门下');
					return;
				}
				if (this.personType != '10' && chooseOrg.orgType == 4) {
					common.message.toast('建筑工人或班组长不能挂到项管部下');
					return;
				}
				this.chooseOrg = chooseOrg;
			}
		},
		changeRadio(orgId) {
			for (let item of this.currentOrgList) {
				if (item.orgId == orgId) {
					this.checkChooseOrg(item);
					break;
				}
			}
		},
		chooseOrgFun(e) {
			const item = e.currentTarget.dataset.item;
			this.checkChooseOrg(item);
		},
		cancel() {
			this.$emit('cancel');
		},
		submit() {
			if (!this.chooseOrg || !this.chooseOrg.orgId) {
				common.message.toast('请选择组织机构');
				return;
			}
			let orgNameData = this.orgFindPath(this.orgList, (node) => node.orgId === this.chooseOrg.orgId);
			orgNameData = orgNameData.join('/');
			this.cancel();
			this.$emit('confirm', {
				detail: {
					orgNameData,
					...this.chooseOrg
				}
			});
		}
	}
};
</script>
<style>
.popup-container {
	height: 85vh;
	display: flex;
	flex-direction: column;
	padding-bottom: env(safe-bo);
}

.title {
	padding: 24rpx;
	background-color: #f6f7fa;
	text-align: center;
}

.previous-container {
	display: flex;
	align-items: center;
	padding: 24rpx 54rpx;
	font-size: 30rpx;
	font-family: PingFangSC-Medium, PingFang SC;
	font-weight: 550;
	color: #3f64fa;
}

.previous-container .left-arrow {
	flex-shrink: 0;
	width: 15rpx;
	height: 15rpx;
	border-top: 4rpx solid #3f64fa;
	border-right: 4rpx solid #3f64fa;
	transform: rotate(225deg);
	position: relative;
	top: -2rpx;
	margin-right: 12rpx;
}

.popup-scroll-view {
	flex: 1;
	height: 0;
}

.org-item-container {
	width: 100%;
}
.org-item {
	display: flex;
	align-items: center;
	padding: 24rpx 32rpx;
}

.org-item-radio {
	position: relative;
	bottom: 2rpx;
}

.org-item-content {
	flex: 1;
	display: flex;
	align-items: center;
}

.org-item .org-name {
	flex: 1;
	margin-right: 24rpx;
}

.org-item .right-arrow {
	flex-shrink: 0;
	width: 15rpx;
	height: 15rpx;
	border-top: 4rpx solid #949dbf;
	border-right: 4rpx solid #949dbf;
	transform: rotate(45deg);
	margin-left: auto;
}

.choose-org-btns {
	margin-top: auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 30rpx;
}

.choose-org-btns .choose-org-btn {
	flex: 1;
	height: 80rpx;
	background: #ebecf2;
	border-radius: 8rpx;
	font-size: 28rpx;
	font-family: PingFangSC-Medium, PingFang SC;
	font-weight: 550;
	color: #4b5680;
	display: flex;
	align-items: center;
	justify-content: center;
}

.choose-org-btns .choose-org-btn:last-child {
	margin-left: 30rpx;
	background: #3f64fa;
	color: #ffffff;
}

.common-btn {
	opacity: 0.7;
}
</style>
